<template>
  <div>
    <ul>
      <li v-for="list in newsList" :key="list.id">
        <i class="el-icon-d-arrow-right"></i>
        <div class="text" @click="toParticular(list)">
          <router-link to="" :title="list.title">{{
            list.title | filterDetails
          }}</router-link>
          <div class="data">{{ list.data }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["newsList"],
  name: "List",
  data() {
    return {};
  },
  methods: {
    toParticular(row) {
      if (row.isInForm) {
        this.$router.push({
          path: "/homePage/particular",
          query: {
            id: row.id,
            title: row.title,
            creator: row.author,
            releaseTime: row.expirationDate,
            article: row.article,
            isInForm: true,
            expirationState: row.expirationState,
            file: row.file,
            fileName: row.fileName,
          },
        });
      }
    },
  },
  filters: {
    // 过滤 超过18个字转换为...
    filterDetails(val) {
      if (val.length > 19) {
        return val.slice(0, 20) + "...";
      }
      return val;
    },
  },
};
</script>

<style lang="scss" scoped>
ul {
  margin: 0;
  height: 2.6rem;
  padding: 0;
  font-size: 0.2rem;
  li {
    cursor: pointer;
    margin: 0.1rem;
    list-style: none;
    display: flex;
    i {
      width: 5%;
      margin: 0px 5px 0px 5px;
    }
    .text {
      width: 5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      a {
        font-weight: 100;
      }
      .data {
        color: #aaaaac;
      }
    }
  }
  li:hover {
    color: #3d9cd6;
    .data {
      color: #aaaaac;
    }
  }
}
</style>
